import React, { useEffect, useState, useRef } from 'react';
import { useInViewport } from 'ahooks';
function Index({ children, onEnter }) {
  const box = useRef();
  const [show, setShow] = useState(false);
  const inViewport = useInViewport(box);
  useEffect(() => {
    if (show != inViewport) {
      setShow(inViewport);
    }
  }, [inViewport]);
  useEffect(() => {
    if (show) {
      onEnter();
    }
  }, [show]);
  return <div ref={box}>{children}</div>;
}

export default Index;
